<template>
  <div>
<!--    <h1>学习单选框组件-radio</h1>-->
<!--    <el-radio v-model="radio" label="男">男</el-radio>-->
<!--    <el-radio v-model="radio" label="女">女</el-radio>-->
<!--    <br>-->

<!--    <h3>控制单选框的样式之name属性</h3>-->
<!--    <el-radio v-model="radio" label="男" name="gender">男</el-radio>-->
<!--    <el-radio v-model="radio" label="女" name="gender">女</el-radio>-->
<!--    <br>-->

<!--    <h3>控制单选框的样式之禁用</h3>-->
<!--    <el-radio v-model="radio" label="男" disabled>男</el-radio>-->
<!--    <el-radio v-model="radio" label="女">女</el-radio>-->
<!--    <br>-->

<!--    <h3>控制单选框的样式之是否显示边框</h3>-->
<!--    <el-radio v-model="radio" label="男" border>男</el-radio>-->
<!--    <el-radio v-model="radio" label="女" border>女</el-radio>-->
<!--    <br>-->

<!--    <h3>控制单选框的样式之控制边框大小</h3>-->
<!--    <el-radio v-model="radio" label="男" border size="mini">男</el-radio>-->
<!--    <el-radio v-model="radio" label="女" border size="small">女</el-radio>-->
<!--    <el-radio v-model="radio" label="阴阳人" border size="medium">阴阳人</el-radio>-->
<!--    <br>-->

<!--    在使用事件时，不能存在上面的案例，上面的案例会干扰事件的demo-->
    <h3>控制单选框的样式之事件</h3>
    <el-radio v-model="gender" label="男" @change="printInfo">男</el-radio>
    <el-radio v-model="gender" label="女" @change="printInfo">女</el-radio>
    <br>

    <h3>单选组的使用</h3>
    <el-radio-group v-model="radio" @change="getOption">
      <el-radio :label="3">备选项</el-radio>
      <el-radio :label="6">备选项</el-radio>
      <el-radio :label="9">备选项</el-radio>
    </el-radio-group>

  </div>
</template>

<!--script标签中添加setup是指刚打开页面的初始化代码，类似于java中的static代码块吗？-->
<script>
export default {
  name: "Radio",
  data() {
    return {
      gender: "男",
      radio: 3
    };
  },
  methods: {
    printInfo() {
      console.log("当前选中的性别为：" + this.gender);
    },
    getOption(){
      console.log("选中的选项为：" + this.radio);
    }
  }

}
</script>
